<script setup lang="ts">
import { computed, ref, onMounted, markRaw } from "vue";
import ReCol from "@/components/ReCol";
import { beginnertutorial_info } from "@/api/index";
import { useUserStoreHook } from "@/store/modules/user";
import { isAllEmpty } from "@pureadmin/utils";
import { ArrowUp } from "@element-plus/icons-vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

const props = defineProps({
  element: {
    type: Object,
    required: true,
  },
});

let childs = ""
if (props.element) childs = props.element.childs.join(',')

const isBeginnerShow = ref(false);

const tutorialData = ref([])

/** 昵称（如果昵称为空则显示用户名） */
const username = computed(() => {
  return isAllEmpty(useUserStoreHook()?.nickname)
    ? useUserStoreHook()?.username
    : useUserStoreHook()?.nickname;
});

const iconList = [{
  label: 'about', // 关于好数
  value: 'ri:building-2-fill',
}, {
  label: 'data_life', // 了解客户数据生命周期
  value: 'ri:database-2-fill'
}, {
  label: 'cus_life', // 了解客户生命周期
  value: 'ri:user-smile-fill'
}, {
  label: 'organization', // 了解组织架构
  value: 'ri:group-fill'
}, {
  label: 'call_group', // 了解点呼
  value: 'ri:calculator-fill'
}, {
  label: 'call_single', // 了解群呼
  value: 'ri:user-voice-fill'
}, {
  label: 'worder', // 了解话术管理
  value: 'ri:git-repository-fill'
}]

// 获取新手教程信息
function getBeginnerTutorialInfo() {
  beginnertutorial_info().then(res => {
    let resData = res.data
    resData = resData.filter(item => childs.includes(item.identity))
    for (let i = 0; i < resData.length; i++) {
      let iconItem = iconList.filter(item => item.label === resData[i].identity) || []
      resData[i].icon = iconItem.length ? iconItem[0].value : ""
    }
    tutorialData.value = resData
  });
}

const drawer = ref(false)
const drawerItem = ref()
//
function itemClick(item) {
  drawerItem.value = item
  drawer.value = true
}

onMounted(() => {
  getBeginnerTutorialInfo();
});
</script>

<template>
  <re-col v-motion class="mb-[12px]" :value="24">
    <div class="tutorial">
      <div class="top">
        <b class="text-md font-medium"
          >Hi {{ username }}，欢迎一起来了解帮企企crm，助力企业业绩提升!</b
        >
        <!-- <div
          class="handle"
          :class="{ close: !isBeginnerShow }"
          @click="isBeginnerShow = !isBeginnerShow"
        >
          {{ isBeginnerShow ? "收起" : "展开" }}新手教程
          <div class="icon">
            <el-icon size="12"><ArrowUp /></el-icon>
          </div>
        </div> -->
      </div>
      <el-row :gutter="12" v-if="isBeginnerShow">
        <re-col
          v-for="(item, index) in tutorialData"
          :key="index"
          v-motion
          class="mt-[12px]"
          :value="6"
          :md="12"
          :sm="12"
          :xs="24"
          :initial="{
            opacity: 0,
            y: 100
          }"
          :enter="{
            opacity: 1,
            y: 0,
            transition: {
              delay: 80 * (index + 1)
            }
          }"
        >
          <div class="inner" @click="itemClick(item)">
            <div class="icon">
              <IconifyIconOffline
                :icon="useRenderIcon(item.icon)"
                color="#d5eded"
                width="34px"
              />
              <div class="badge"></div>
            </div>
            <div class="info">
              <p>任务{{ index + 1 }}：</p>
              <div class="name">{{ item.title }}</div>
              <div class="text">{{ item.brief }}</div>
            </div>
          </div>
        </re-col>
      </el-row>
    </div>

    <el-drawer
      :title="drawerItem?.title"
      v-model="drawer"
      size="90%"
      direction="ltr"
      append-to-body
    >
      <div class="w-full h-full">
        <video style="width: 100%; height: 500px; object-fit: cover; background-color: #f6fcfc;" :src="drawerItem.source_url"></video>

        <div v-html="drawerItem.content"></div>
      </div>
    </el-drawer>
  </re-col>
</template>

<style lang="scss" scoped>
.tutorial {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px 12px;

  .top {
    display: flex;
    align-items: center;

    .handle {
      display: flex;
      align-items: center;
      margin-left: 40px;
      font-size: 15px;
      font-weight: bold;
      color: var(--pure-theme-menu-active-before);
      cursor: pointer;

      .icon {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--pure-theme-menu-active-before);
        border-radius: 50%;
        margin-left: 6px;
        transition: all 0.3s;
      }

      &.close {
        .icon {
          transform: rotate(180deg);
        }
      }
    }
  }

  .inner {
    background-color: #f6fcfc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 14px 20px;

    .icon {
      position: relative;

      .badge {
        width: 13px;
        height: 13px;
        background-color: #60d1d1;
        border-radius: 50%;
        position: absolute;
        right: -3px;
        bottom: -3px;
      }
    }

    .info {
      margin-left: 20px;
      flex: 1;
      overflow: hidden;
      p {
        font-size: 15px;
        color: #666666;
      }

      .name {
        font-size: 15px;
      }

      .text {
        margin-top: 3px;
        font-size: 13px;
        color: #666666;
      }
    }
  }
}
</style>
